<template>
  <el-dialog v-model="dialogFormVisible" center title="Shipping address">
    <el-form :model="form">
      <el-form-item :label-width="formLabelWidth" label="Promotion name">
        <el-input v-model="form.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="Zones">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai"/>
          <el-option label="Zone No.2" value="beijing"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确 定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref, watch} from 'vue'
import {storeToRefs} from "pinia";
import {useStore} from "@/store/modules/user";

// 定义从父组件传过来的数据 dialogData，父组件使用该组件必须传该属性
const props = defineProps({
  dialogData: {
    required: true,
    type: String,
  },
});

const dialogFormVisible = ref(false)
const store = useStore()
const refStore = storeToRefs(store)

// 监听store中的状态值
watch(
    () => refStore.dialogFormVisible.value,
    (after, before) => {
      console.log("监听dialogFormVisible--after", after)
      console.log("监听dialogFormVisible--before", before)
      dialogFormVisible.value = refStore.dialogFormVisible.value
    }
)

const handleCancel = () => {
  store.setDialogFormVisible(false)
}

const handleConfirm = () => {
  store.setDialogFormVisible(false)
}
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
</script>

<style lang="less" scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
